<!--填空题-->
<template>
  <div>
    <div style="margin-bottom: 20px;">
      <el-cascader
        placeholder="请选择"
        :options="options"
        filterable
        size="mini"
        v-model="dataForm.f_sb_id"
      ></el-cascader>
      <el-button size="mini" @click="resetInfo">重置</el-button>
      <el-button size="mini" type="success" icon="el-icon-search" @click="searchDataByType">查询</el-button>
      <el-button size="mini" type="primary" icon="el-icon-circle-plus" @click="addData">添加</el-button>
      <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteData">删除</el-button>
    </div>
    <el-table
      :data="tableDataList"
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline>
            <el-form-item label="答案">
              <div v-for="(v,k) in  props.row.FillAnsList" :key="k">
                <el-row>
                    <el-col>
                      <el-form-item :label="v.label" prop="value">
                        <el-input v-model="v.value"></el-input>
                      </el-form-item>
                    </el-col>
                </el-row>
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="80">
      </el-table-column>
      <el-table-column
        type="index"
        width="80">
      </el-table-column>
      <el-table-column
        label="课目"
        prop="sb_name"
        width="150">
      </el-table-column>
      <el-table-column
        label="题干"
        prop="fb_title">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)"  size="mini" >编辑</el-button>
          <el-button  size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 40,50]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    <add-fill-dialog v-if="showAddVisible" :showAddVisible="showAddVisible" @closeDialog="closeDialog"></add-fill-dialog>
    <edit-fill-dialog v-if="showEditVisible" :showEditVisible="showEditVisible" :rowData="rowData" @closeDialog="closeDialog"></edit-fill-dialog>
  </div>
</template>
<script>
  import addFillDialog from './question/addFill.vue'
  import editFillDialog from './question/editFill.vue'
  import {getAllSubject,addFill,deleteFill,updateFill,findFill} from '@/api/questions'
  import ElCol from "element-ui/packages/col/src/col";
  export default{
    components:{
      ElCol,
      addFillDialog,
      editFillDialog
    },
    mounted(){
      this.c_getAllSubject();
      this.getFillList();
    },
    data(){
      return {
        showAddVisible:false,
        showEditVisible:false,
        tableDataList:[],
        multipleSelection:[],
        rowData:null,
        options:[], //选择所属科目
        dataForm:{
          f_sb_id:[],
        },
        pageInfo:{
          page:1,//页数
          size:10, //页面大小
          total:0 //页总数
        },
        requestData:{
          pageSize:10,
          pageNum:1,
          map:{
            sb_id:0,
          }
        }
      }
    },
    methods:{
      getFillList(){
        this.tableDataList = [];
        findFill(this.requestData).then(res=>{
            if(res.code == 200){
              if(res.data.data != null && res.data.data.length > 0){
                let tableData = res.data.data[0];
                this.tableDataList = tableData.list;
                for(let i = 0;i < this.tableDataList.length;i ++){
                  this.tableDataList[i].sb_name = tableData.sb_name;
                  let ansStr =  this.tableDataList[i].fillBanksAnswer.fba_answer;
                  let strArray = ansStr.split("-");
                  let FillAnsList = [];
                  for(let j = 0;j < strArray.length;j ++){
                     FillAnsList.push({label:"空_"+(j+1)+"：",value:strArray[j]})
                  }
                  this.tableDataList[i].FillAnsList = FillAnsList;
                }
              }
              this.pageInfo.total = res.data.total;
            }
        })
      },

      searchDataByType(){
        if(this.dataForm.f_sb_id.length > 0){
          this.requestData.map.sb_id = parseInt(this.dataForm.f_sb_id[2]); //所属科目
        }
        this.pageInfo.page = 1;
        this.pageInfo.size = 10;
        this.pageInfo.total = 0;

        this.requestData.pageNum = 1;
        this.requestData.pageSize = 10;

        this.getFillList();
      },

      addData(){
         this.showAddVisible = true;
      },

      deleteData(){
        if(this.multipleSelection.length > 0){
          this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteFill(this.multipleSelection).then(res=>{
              if(res.code == 200){
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
                this.getFillList();
              }else{
                this.$message({
                  type: 'error',
                  message: '删除失败'
                });
              }
            })
          }).catch(() => {
          });
        }else{
          this.$message({
            type: 'warning',
            message: '请至少选择一条数据'
          });
        }
      },

      //每页的条数发生改变时调用
      handleSizeChange(size){
        this.requestData.pageSize = size;
        this.pageInfo.size = size;
        this.getFillList();
      },

      //页数发生改变时调用
      handleCurrentChange(page){
        this.requestData.pageNum = page;
        this.pageInfo.page = page;
        this.getFillList();
      },

      //点击复选框时触发
      handleSelectionChange(val){
        this.multipleSelection = val;
      },

      handleClick(row){
         this.rowData = row;
         this.showEditVisible = true;
      },

      handleDelete(row){
        let deleteArray = [row];
        this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteFill(deleteArray).then(res=>{
            if(res.code == 200){
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              this.getFillList();
            }else{
              this.$message({
                type: 'error',
                message: '删除失败'
              });
            }
          });
        }).catch(() => {

        });
      },

      closeDialog(type){
        if(type == "add"){
            this.showAddVisible = false;
        }else if(type == "edit"){
            this.showEditVisible = false;
        }
        this.getFillList()
      },

      resetInfo(){
        this.dataForm = {
          f_sb_id:[],
        };
        this.requestData .map.sb_id = 0;

        this.requestData.pageNum = 1;
        this.pageInfo.page = 1;

        this.c_getAllSubject();
        this.getFillList();
      },

      //获取所有级联选项
      c_getAllSubject(){
        this.dataForm.f_sb_id = [];
        getAllSubject().then(res=>{
          if(res.code == 200){
            for(let i = 0;i < res.data.length;i ++){
              let tLevel = {value:res.data[i].l_id,label:res.data[i].l_name};
              this.options.push(tLevel);
              if(res.data[i].list != null && res.data[i].list.length > 0){
                let gList = res.data[i].list;
                let children = [];
                for(let j = 0;j < gList.length;j ++){
                  let gGroup = {value:gList[j].g_id,label:gList[j].g_name};
                  children.push(gGroup);

                  if(gList[j].list != null && gList[j].list.length > 0){
                    let sList = gList[j].list;
                    let children1 = [];

                    for(let n = 0;n < sList.length;n ++){
                      let subject = {value:sList[n].sb_id,label:sList[n].sb_name};
                      children1.push(subject);
                    }
                    gGroup.children = children1;
                  }
                }
                tLevel.children = children;
              }
            }
          }
        });
      },
    }
  }
</script>
